import { Radio, Button, Form, DatePicker, Select, Table } from 'antd';
import { HomeColumns } from '@/utils/home.Clumns';
import { useStore } from '@/store';
import './index.scss'
import { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { http } from '@/utils';

function Article() {
    const { ArticleStore } = useStore()

    useEffect(() => {
        ArticleStore.getChannel()
    }, [])
    // 样式
    const layout = {
        labelCol: {
            span: 1,
        },
        wrapperCol: {
            span: 8,
        },
    };

    // 点击筛选
    const onFinish = _params => {
        // const { channel_id, data, status } = values
        if (_params.data) {
            _params.begin_pubdate = _params.data[0].format('YYYY-MM-DD')
            _params.end_pubdate = _params.data[1].format('YYYY-MM-DD')
        }
        for (var key in _params) {
            if ((_params[key] == (('' || null || undefined)) || key == 'data')) {
                delete _params[key]
            }
        }
        setParams({
            ..._params,
            page: 1,
            per_page: 10
        })
        console.log(params);
    };

    //日期
    const { RangePicker } = DatePicker;

    // 选择框
    const { Option } = Select;

    //文章参数
    const [params, setParams] = useState({
        page: 1,
        per_page: 10
    })

    //文章列表
    const [aricleList, SetAricleList] = useState({
        list: [],
        count: null
    })

    useEffect(() => {
        const getAricleList = async () => {
            const res = await http.get('/mp/articles', { params })
            SetAricleList({
                list: res.data.results,
                count: res.data.total_count
            })
        }
        getAricleList()
    }, [params])

    return (
        <>
            <Form {...layout} initialValues={{ status: -1 }} onFinish={onFinish}>
                {/* 单选框 */}
                <Form.Item label="状态："
                    name="status">
                    <Radio.Group
                    >
                        <Radio value={-1}>A</Radio>
                        <Radio value={0}>B</Radio>
                        <Radio value={1}>C</Radio>
                        <Radio value={2}>D</Radio>
                    </Radio.Group>
                </Form.Item>
                {/* 频道 */}
                <Form.Item label="频道"
                    name="channel_id">
                    <Select
                        placeholder="Select a option and change input text above"
                        allowClear
                    >
                        {ArticleStore.channel.map(ch => <Option key={ch.id} value={ch.id}>{ch.name}</Option>)}
                    </Select>
                </Form.Item>

                <Form.Item name="data" label="筛选日期：">
                    <RangePicker />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 2,
                        span: 8,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        筛选
                    </Button>
                </Form.Item>
            </Form>

            <Table rowKey="id" columns={HomeColumns} dataSource={aricleList.list}
                pagination={{
                    pageSize: params.per_page,
                    total: aricleList.count,
                    onChange: ((page) => (setParams({ ...params, page })))
                }}
            />

        </>
    )
}

export default observer(Article)